<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            #{ managerCriarTestamento.testamento.id == null ? 'Cadastrar Testamento' : 'Editar Testamento' }  
        </ui:define>        

        <ui:define name="content">
            <h:form id="criarTestamentoForm">
                <p:messages id="criarTestamentoMessages" autoUpdate="true" />

                <div class="actions">
                    <div id="buttons">
                        <p:button value="Pesquisar" outcome="pesquisarTestamento.xhtml"
                                  rendered="#{ managerCriarTestamento.testamento.id == null }"
                                  icon="ui-icon-search" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>

                <p:fieldset legend="Dados" id="dadosFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Ato" for="atoTipoEPAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="atoTipoEPAutoComplete" value="#{ managerCriarTestamento.testamento.atoTipoEP }"
                                            forceSelection="true" dropdown="true" var="atoTipoEP" itemValue="#{ atoTipoEP }" 
                                            itemLabel="#{ atoTipoEP.descricao }" completeMethod="#{ managerCriarTestamento.autocompletarAtoTipoEP }"
                                            converter="conversoratotipoep" minQueryLength="3" required="true" requiredMessage="Tipo do Ato é obrigatório">
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@form" />
                            </p:autoComplete>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" value="#{ managerCriarTestamento.testamento.numero }"
                                         required="true" requiredMessage="Número é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Data do Testamento" for="dataTestamentoCalendar" />
                        </div>
                        <div class="column3">
                            <p:calendar id="dataTestamentoCalendar" value="#{ managerCriarTestamento.testamento.dataTestamento }"
                                        showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" required="true"
                                        requiredMessage="Data do Testamento é obrigatório" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Livro" for="livroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="livroInputText" value="#{ managerCriarTestamento.testamento.livro }"
                                         required="true" requiredMessage="Livro é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Complemento do Livro" for="livroComplementoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="livroComplementoInputText" value="#{ managerCriarTestamento.testamento.livroComplemento }" />
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Folha" for="folhaInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhaInputText" value="#{ managerCriarTestamento.testamento.folha }"
                                         required="true" requiredMessage="Folha é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Complemento do Folha" for="folhaComplementoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhaComplementoInputText" value="#{ managerCriarTestamento.testamento.folhaComplemento }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Observação" for="observacaoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="observacaoInputTextarea" value="#{ managerCriarTestamento.testamento.observacao }" />
                        </div>                        
                    </div>

                </p:fieldset>

                <p:fieldset legend="Revogação" id="revogacaoFieldset" rendered="#{ managerCriarTestamento.testamento.atoTipoEP.tipoAtoRCTO == 'REVOGACAO' }">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Desconhecido?" for="atoDesconhecidoSelectBooleanButton" />                        
                        </div>
                        <div class="column1">
                            <p:selectBooleanButton id="atoDesconhecidoSelectBooleanButton" value="#{ managerCriarTestamento.testamento.atoDesconhecido }" onLabel="Sim" offLabel="Não">
                                <p:ajax event="change" oncomplete="widthFix();" update=":criarTestamentoForm:desconhecidoInputTextarea, :criarTestamentoForm:revogacaoPanel"/>
                            </p:selectBooleanButton>
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Desconhecido" for="desconhecidoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="desconhecidoInputTextarea" value="#{ managerCriarTestamento.testamento.desconhecido }"
                                             disabled="#{ not managerCriarTestamento.testamento.atoDesconhecido }"
                                             required="true" requiredMessage="Desconhecido é obrigatório"/>
                        </div>
                    </div>                    

                    <p:panel id="revogacaoPanel" styleClass="noborder">
                    
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Data da Revogação" for="dataRevogacaoTestamentoCalendar" />
                            </div>
                            <div class="column3">
                                <p:calendar id="dataRevogacaoTestamentoCalendar" value="#{ managerCriarTestamento.testamento.dataRevogacaoTestamento }"
                                            required="true" requiredMessage="Data da Revogação é obrigatório"
                                            disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                            showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Livro" for="livroRevogacaoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="livroRevogacaoInputText" value="#{ managerCriarTestamento.testamento.livroRevogacao }"
                                             disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                             required="true" requiredMessage="Livro é obrigatório"/>
                            </div>
                            <div class="column2">
                                <p:outputLabel value="Complemento do Livro" for="livroComplementoRevogacaoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="livroComplementoRevogacaoInputText" value="#{ managerCriarTestamento.testamento.livroComplementoRevogacao }"
                                             disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                             required="true" requiredMessage="Complemento do Livro é obrigatório" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Folha" for="folhaRevogacaoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="folhaRevogacaoInputText" value="#{ managerCriarTestamento.testamento.folhaRevogacao }"
                                             disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                             required="true" requiredMessage="Folha é obrigatório" />
                            </div>
                            <div class="column2">
                                <p:outputLabel value="Complemento do Folha" for="folhaComplementoRevogacaoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="folhaComplementoRevogacaoInputText" value="#{ managerCriarTestamento.testamento.folhaComplementoRevogacao }"
                                             disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                             required="true" requiredMessage="Complemento da Folha é obrigatório"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Cidade" for="cidadeResidenciaAutoComplete" />
                            </div>
                            <div class="column3">
                                <p:autoComplete id="cidadeResidenciaAutoComplete" value="#{ managerCriarTestamento.testamento.cidadeRevogacao }"
                                                forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                                itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarTestamento.autocompletarCidade }"
                                                required="true" requiredMessage="Cidade é obrigatório"
                                                disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                                converter="conversorcidade" minQueryLength="3" /> 
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Cartório" for="cartorioRevogacaoInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="cartorioRevogacaoInputText" value="#{ managerCriarTestamento.testamento.cartorioRevogacao }"
                                             disabled="#{ managerCriarTestamento.testamento.atoDesconhecido }"
                                             required="true" requiredMessage="Cartório é obrigatório" />
                            </div>
                        </div>
                        
                    </p:panel>

                </p:fieldset>

                <p:fieldset legend="Testador" id="testadorFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome" for="nomeInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="nomeInputText" value="#{ managerCriarTestamento.testamento.testador.nome }"
                                         required="true" requiredMessage="Nome é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome da Mãe" for="nomeMaeInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="nomeMaeInputText" value="#{ managerCriarTestamento.testamento.testador.nomeMae }"
                                         required="true" requiredMessage="Nome da mãe é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome do Pai" for="nomePaiInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="nomePaiInputText" value="#{ managerCriarTestamento.testamento.testador.nomePai }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="CPF" for="cpfInputMask" />
                        </div>
                        <div class="column3">
                            <p:inputMask id="cpfInputMask" value="#{ managerCriarTestamento.testamento.testador.cpf }"
                                         mask="999.999.999-99" required="true" requiredMessage="CPF é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Data de Nascimento" for="dataNascimentoCalendar" />
                        </div>
                        <div class="column3">
                            <p:calendar id="dataNascimentoCalendar" value="#{ managerCriarTestamento.testamento.testador.dataNascimento }"
                                        required="true" requiredMessage="Data de Nascimento é obrigatório"
                                        showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" />
                        </div> 
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="RG" for="rgInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="rgInputText" value="#{ managerCriarTestamento.testamento.testador.rg }" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Orgão emissor" for="orgaoEmissorInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="orgaoEmissorInputText" value="#{ managerCriarTestamento.testamento.testador.orgaoEmissor }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="RNE" for="rneInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="rneInputText" value="#{ managerCriarTestamento.testamento.testador.rne }" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Outros" for="outrosInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="outrosInputText" value="#{ managerCriarTestamento.testamento.testador.outros }" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Selos" id="selosEPFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroSeloInputText" value="#{ managerCriarTestamento.seloEP.numero }"
                                         required="true" requiredMessage="Número é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Série" for="serieSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="serieSeloInputText" value="#{ managerCriarTestamento.seloEP.serie }"
                                         required="true" requiredMessage="Série é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Selo" for="tipoSeloAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerCriarTestamento.seloEP.tipoSelo }"
                                            forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                            itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerCriarTestamento.autocompletarTipoSelo }"
                                            converter="conversortiposelo" minQueryLength="3"
                                            required="true" requiredMessage="Tipo do Selo é obrigatório">
                                <p:column>
                                    <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                </p:column>
                                <p:column>#{ tipoSelo.nome }</p:column>
                            </p:autoComplete>
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarTestamento.adicionarSeloEP() }" update="criarTestamentoForm:selosEPFieldset"
                                         icon="ui-icon-plus"  styleClass="ui-priority-primary" process="criarTestamentoForm:selosEPFieldset" oncomplete="widthFix();" />
                        <p:commandButton value="Limpar" update="criarTestamentoForm:selosEPFieldset" process="@this, criarTestamentoForm:selosEPFieldset" icon="ui-icon-close"
                                         actionListener="#{ managerCriarTestamento.limparSeloEP() }" oncomplete="widthFix();" />
                    </div>

                    <p:dataTable id="selosEPDataTable" value="#{ managerCriarTestamento.selosEP }" var="seloEP"
                                 rows="10" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhuma selo adicionado.">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarTestamento.editarSeloEP(seloEP) }"
                                                 process="@this" update=":criarTestamentoForm:selosEPFieldset" oncomplete="widthFix();" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarTestamento.removerSeloEP(seloEP) }"
                                                 process="@this" update="selosEPDataTable" />
                            </div>
                        </p:column>
                        <p:column headerText="Número" width="30%">
                            <h:outputText value="#{ seloEP.numero }" />
                        </p:column>
                        <p:column headerText="Série" width="30%">
                            <h:outputText value="#{ seloEP.serie }" />
                        </p:column>
                        <p:column headerText="Tipo" width="35%">
                            <h:outputText value="#{ seloEP.tipoSelo.nome }" />
                        </p:column>
                    </p:dataTable>

                </p:fieldset>

                <p:fieldset legend="Anexos" id="anexosFieldset">

                    <p:fileUpload
                        auto="true"
                        mode="advanced"
                        label="Anexar"
                        uploadLabel="Enviar"
                        cancelLabel="Cancelar"
                        fileUploadListener="#{ managerCriarTestamento.adicionarAnexo }"
                        multiple="true"
                        allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|xls|xlsx|pdf|)$/"
                        dragDropSupport="true"
                        invalidFileMessage="Tipo de arquivo não suportado."
                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                        process="@this"
                        update="@this, :criarTestamentoForm:anexosFieldset" />

                    <ui:repeat value="#{ managerCriarTestamento.anexos }" var="anexo">
                        <p:panel styleClass="thumbnail">
                            <p:commandButton id="removeButton" alt="Remover" 
                                             process="@this" styleClass="ui-button-only ui-priority-primary button-remove"
                                             icon="ui-icon-trash" update=":criarTestamentoForm:anexosFieldset"
                                             actionListener="#{ managerCriarTestamento.removerAnexo(anexo) }" />

                            <h:outputLink
                                value="#{ anexo.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show' }" title="#{ anexo.nomeExibicao }"  target="_blank">

                                <p:graphicImage rendered="#{ managerImagem.imagem(anexo) }"
                                                url="#{ managerImagem.urlThumbnailImagem(anexo) }" />
                                <p:outputLabel styleClass="nome_anexo" value="#{ managerImagem.nomeAnexo(anexo) }"
                                               rendered="#{ managerImagem.imagem(anexo) }"/>
                                <p:graphicImage height="100" width="100" rendered="#{ managerImagem.PDF(anexo) }" 
                                                url="#{ managerImagem.urlPDF }" />
                                <p:outputLabel value="#{ managerImagem.nomeAnexoPdf(anexo) }" 
                                               rendered="#{ managerImagem.PDF(anexo) }"/>
                                <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(anexo) }"/>

                            </h:outputLink>

                        </p:panel>
                    </ui:repeat>

                </p:fieldset>

                <div class="command">
                    <p:commandButton actionListener="#{ managerCriarTestamento.salvar() }" value="Salvar"
                                     styleClass="ui-priority-primary" update="@form" oncomplete="widthFix();"
                                     process="@this, :criarTestamentoForm:dadosFieldset, :criarTestamentoForm:revogacaoFieldset, :criarTestamentoForm:testadorFieldset, :criarTestamentoForm:selosEPDataTable, :criarTestamentoForm:anexosFieldset"
                                     icon="ui-icon-disk" onsuccess="goY(0);" />
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarTestamento.xhtml" />
                </div>                

            </h:form>

        </ui:define>
    </ui:composition>

</html>